<template>
<div id="header">
        <el-row>
            <el-col :span="8">
                <div id="logo">
                    <h1>西北大学软件工程资产库平台</h1>
                </div>
            </el-col>
            <el-col :span="8">
                <ul id="nav">
                    <li><router-link to="/">首页</router-link></li>
                    <li><router-link to="/library/root">资产库</router-link></li>
                    <li><router-link to="/project">项目</router-link></li>
                    <li><router-link to="/my">我的</router-link></li>
                 </ul>
            </el-col>
            <el-col :span="8" id="right">
                <el-button id="button" v-if="!this.$store.state.login.isLogin" @click='login'>登录/注册</el-button>
                <div v-else>
                    <span id="welcome">欢迎您，{{this.$store.state.login.username}}</span>&nbsp;&nbsp;<el-button id="button" @click="logout">注销</el-button>
                </div>
            </el-col>
        </el-row>
</div>
</template>

<script>
export default {
    name:'MyHeader',
    data:function(){
        return {
        }
    },
    methods:{
        login:function(){
            this.$router.push({ path: '/login'});
        },
        logout:function(){
            this.$store.commit('clearToken');
            this.$router.push({ path: '/'});
        }
    }
}
</script>
<style lang="scss" scoped>
html,body{
    width: 100%;
    height: 100%;
    background-color: #000;
}
a{
    text-decoration: none;
    color: #000;
}
#header{
    width:100%;
    height:10%;
    line-height: 70.55px;
    min-height: 70.55px;
    color: #000;
    padding-left:15%;
    padding-right: 15%;
    box-sizing:border-box;
    border-bottom: 0.1px rgba(255, 255, 255, 0.5) solid;
    min-width: 1069px;
    background-color: #fff;
    #logo,h1,#nav,li{
        display: inline-block;
    }
    #logo{
        h1{
            font-size: 20px;
        }
    }
    #nav{
        float:right;
        li{
            width:60px;
            text-align: center;
        }
        min-width: 256px;
    }
    #right{
        padding-left: 20px;
        text-align: right;
    }
    #button{
        color: #000;
        border:1px #000 solid;
        background-color: rgba(0,0,0, 0);
        padding-top: 7px;
        padding-bottom: 7px;
    }
    #welcome{
        color: #409EFF;
    }
}
</style>